import React from 'react';
import { Form, Input, Icon, message, Button, Pagination, Tooltip } from 'antd';
import styles from './editingStyle.less';
import EditSlot from '@/modules/EditSlot';

const { Search } = Input;

class SimilarQuestionReadOnly extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      stdQuestion: '',
      similarQuestions: props.similarQuestionsList,
      moreQuestions: [],
      moreQuestionPage: 1,
      query: '',
      searchQuestion: [],
      showSlotIndex: -3,
    };
  }

  componentDidMount() {
    if (this.props.onRef) {
      this.props.onRef(this)
    };
    if (this.props.secondDrawer) {
      // console.log(this.props.stdQuestion);
      this.setStandQuestion(this.props.stdQuestion)
      this.setState({ moreQuestions: this.state.similarQuestions, });
    } else {
      if (this.props.stdQuestion) {
        this.setStandQuestion(this.props.stdQuestion);
      }
    }
  }

  addQuestion = e => {
    let { similarQuestions, moreQuestions } = this.state;
    const { secondDrawer } = this.props;
    let value = this.props.form.getFieldValue('similarQuestion');
    let flog = true;
    const that = this;

    if (value === '' || !value) {
      return message.error('添加的问题不能为空');
    };
    if (secondDrawer) {
      flog = moreQuestions.some(q => {
        if (q == value) {
          return true;
        }
      });
    } else {
      flog = similarQuestions.some(q => {
        if (q == value) {
          return true;
        }
      });
    }

    if (flog) {
      return message.error('【' + value + '】问题已存在');
    };
    if (secondDrawer) {
      moreQuestions.unshift(value);
    } else {
      similarQuestions.unshift(value);
    };
    that.setState({ similarQuestions, moreQuestions }, () => {
      that.props.form.resetFields(['similarQuestion']);
    });
  };

  upQuestion = k => {
    let { similarQuestions, moreQuestions } = this.state;
    const { secondDrawer, form } = this.props;
    const stdQuestion = form.getFieldValue('stdQuestion');
    if (secondDrawer) {
      let index = moreQuestions.findIndex(item => item == k);
      // moreQuestions[index] = moreQuestions.splice(index - 1, 1, moreQuestions[index])[0];
      moreQuestions[index] = stdQuestion;
      form.setFieldsValue({ stdQuestion: k });
    } else {
      let index = similarQuestions.findIndex(item => item == k);
      // similarQuestions[index] = similarQuestions.splice(index - 1, 1, similarQuestions[index])[0];
      similarQuestions[index] = stdQuestion;
      form.setFieldsValue({ stdQuestion: k });
    };
    this.setState({ similarQuestions, moreQuestions, stdQuestion: k });
  };

  delQuestion = k => {
    let { similarQuestions, moreQuestions, searchQuestion, query } = this.state;
    const { secondDrawer } = this.props;
    if (secondDrawer) {
      if (query) {
        searchQuestion = searchQuestion.filter(key => key !== k);
      };
      moreQuestions = moreQuestions.filter(key => key !== k);
    } else {
      similarQuestions = similarQuestions.filter(key => key !== k);
    };
    this.setState({ similarQuestions, moreQuestions, searchQuestion });
  }

  handelPageChange = value => {
    this.setState({ moreQuestionPage: value });
  }

  handleSearch = value => {
    let { moreQuestions, moreQuestionPage, searchQuestion } = this.state;
    if (!value) {
      searchQuestion = moreQuestions;
    } else {
      searchQuestion = moreQuestions.filter(q => q.indexOf(value) > -1);
    };
    moreQuestionPage = 1;
    this.setState({ searchQuestion, moreQuestionPage, query: value });
  }

  setQuestions = data => {
    this.setState({ similarQuestions: data });
  }

  setStandQuestion = value => {
    this.setState({ stdQuestion: value }, () => {
      this.props.form.setFieldsValue({ stdQuestion: value });
    })
  }

  handelSimChangeByIndex = (e, index) => {
    let { similarQuestions, moreQuestions, searchQuestion, query } = this.state;
    const { secondDrawer } = this.props;
    if (this.props.secondDrawer) {
      if (query) {
        let orgValue = searchQuestion[index];
        let newIndex = moreQuestions.indexOf(orgValue);
        moreQuestions[newIndex] = e.target.value;
        searchQuestion[index] = e.target.value;
      } else {
        moreQuestions[index] = e.target.value;
      }
    } else {
      similarQuestions[index] = e.target.value;
    };
    this.setState({ similarQuestions, moreQuestions, searchQuestion });
  };

  submitQuestions = () => {
    const { form } = this.props;
    const { similarQuestions } = this.state;
    let questionObj = {};
    form.validateFields((errors, values) => {
      if (!errors) {
        questionObj = {
          stdQuestion: values.stdQuestion,
          questions: similarQuestions
        }
      }
    });
    return questionObj;
  }

  showMoreQuestionSetStdQuestion = (similarQuestions) => {
    let stdQuestion = this.props.form.getFieldValue('stdQuestion');
    this.setState({ stdQuestion }, () => {
      this.props.showMoreQuestion(similarQuestions, stdQuestion);
    });
  }

  getStdQuestionForSecondDrawer = () => {
    return this.props.form.getFieldValue('stdQuestion');
  }

  showSlotByIndex = index => {
    this.setState({ showSlotIndex: index });
  }

  addSlotToStd = val => {
    const { form } = this.props;
    let stdQuestion = form.getFieldValue('stdQuestion') ? form.getFieldValue('stdQuestion') : '';
    stdQuestion = stdQuestion + '<' + val + '>';
    form.setFieldsValue({ stdQuestion });
    this.setState({ stdQuestion });
  }

  addSlotToSim = val => {
    const { form } = this.props;
    let similarQuestion = form.getFieldValue('similarQuestion') ? form.getFieldValue('similarQuestion') : '';
    similarQuestion = similarQuestion + '<' + val + '>';
    form.setFieldsValue({ similarQuestion });
  }

  addSlotToSimByIndex = (val, index) => {
    let { similarQuestions, moreQuestions } = this.state;
    if (this.props.secondDrawer) {
      moreQuestions[index] = moreQuestions[index] + '<' + val + '>';
    } else {
      similarQuestions[index] = similarQuestions[index] + '<' + val + '>';
    };
    this.setState({ similarQuestions, moreQuestions });
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { similarQuestions, moreQuestionPage, query, searchQuestion, stdQuestion, showSlotIndex } = this.state;
    let { moreQuestions } = this.state;
    const { secondDrawer, showMoreQuestion, similarQuestionsList, stdQuestionMore, slotData } = this.props;
    let minIndex = (moreQuestionPage - 1) * 10;
    let maxIndex = (moreQuestionPage - 1) * 10 + 10;
    if (query) {
      moreQuestions = searchQuestion;
    }
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
    };
    const formItemForSimilar = {
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18, offset: 5 },
      },
    };
    return (
      <Form {...formItemLayout}>
        {
          !secondDrawer ? '' : (
            <Form.Item {...formItemForSimilar}>
              <Search
                placeholder={'请输入搜索内容'}
                style={{ width: '80%' }}
                onSearch={this.handleSearch}
              />
            </Form.Item>
          )
        }
        <Form.Item label={'标准问'}>
          {getFieldDecorator('stdQuestion', {
            rules: [{ required: true, message: '标准问必填' }],
          })(
            <Input
              placeholder={'请输入标准问'}
              style={{ width: '80%' }}
              disabled={true}
              maxLength={100}
              onFocus={() => this.showSlotByIndex(-2)}
            />
          )}
          {showSlotIndex === -2 ? <EditSlot slots={slotData} click={this.addSlotToStd} /> : ''}
        </Form.Item>
        {/*<Form.Item label={'相似问'}>*/}
        {/*  {getFieldDecorator('similarQuestion')(*/}
        {/*    <Input*/}
        {/*      placeholder={'请输入相似问题，点击回车键继续添加'}*/}
        {/*      onPressEnter={this.addQuestion}*/}
        {/*      style={{ width: '80%' }}*/}
        {/*      disabled={true}*/}
        {/*      maxLength={100}*/}
        {/*      onFocus={() => this.showSlotByIndex(-1)}*/}
        {/*    />*/}
        {/*  )}*/}
        {/*</Form.Item>*/}

        {
          !secondDrawer ? similarQuestions.map((item, index) => {
            return (
              index > -1 && index < 5 ? index === 0 ?
                <Form.Item key={index} label={'相似问'}>
                  <Input
                    value={item}
                    style={{ width: '80%' }}
                    onChange={e => this.handelSimChangeByIndex(e, index)}
                    disabled={true}
                    maxLength={100}
                    onFocus={() => this.showSlotByIndex(index)}
                  />
                </Form.Item>
                :
                <Form.Item {...formItemForSimilar} key={index}>
                  <Input
                    value={item}
                    style={{ width: '80%' }}
                    onChange={e => this.handelSimChangeByIndex(e, index)}
                    disabled={true}
                    maxLength={100}
                    onFocus={() => this.showSlotByIndex(index)}
                  />
                </Form.Item>
              : ''
            );
          })
          :
          moreQuestions.map((item, index) => {
            return (
              (index > minIndex || index === minIndex) && index < maxIndex ? index === 0 ?
                <Form.Item key={index} label={'相似问'}>
                  <Input
                    value={item}
                    style={{ width: '80%' }}
                    onChange={e => this.handelSimChangeByIndex(e, index)}
                    disabled={true}
                    maxLength={100}
                    onFocus={() => this.showSlotByIndex(index)}
                  />
                </Form.Item>
                :
                <Form.Item {...formItemForSimilar} key={index}>
                  <Input
                    value={item}
                    style={{ width: '80%' }}
                    onChange={e => this.handelSimChangeByIndex(e, index)}
                    disabled={true}
                    maxLength={100}
                    onFocus={() => this.showSlotByIndex(index)}
                  />
                </Form.Item>
              : ''
            );
          })
        }
        {
          !secondDrawer && similarQuestions.length > 5 ?
            <Form.Item {...formItemForSimilar} >
              <Button onClick={() => this.showMoreQuestionSetStdQuestion(similarQuestions)}>查看更多相似问</Button>
            </Form.Item>
          : ''
        }
        {
          secondDrawer ?
            <div style={{ textAlign: 'center' }}>
              <Pagination
                current={moreQuestionPage}
                total={moreQuestions.length}
                size={10}
                onChange={this.handelPageChange}
              />
            </div>
          : ''
        }
      </Form>
    );
  }
}

export default Form.create()(SimilarQuestionReadOnly);
